<template>
	<view class="container">
		<!--  -->
		<view class="fix-title">
			<!-- 说明 -->
			<view>
				<text>邀请好友加入找零工平台，即可获得1个诚信值</text>
			</view>
			<!-- 我的好友信息类目 -->
			<view>
				<text>姓名</text>
				<text>注册时间</text>
			</view>
		</view>
		
		<!-- 我的好友列表 -->
		<view class="list">
			<view class="single-friend" v-for="(item, index) in friendsList" :key="item.userId">
				<view>
					<image :src="item.pic" mode="aspectFill"></image>
					<text>{{ item.userName }}</text>
				</view>
				<view>{{ item.createTime.slice(0, 11) }}</view>
			</view>
			<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"> </uni-load-more>
		</view>
		
		<!-- 分享按钮 -->
		<view class="bottom">
			<view @click="handleShare('WXSceneSession')">
				<image src="/static/icon1/05.png" mode="aspectFill"></image>
				<text>微信</text>
			</view>
			<view @click="handleShare('WXSenceTimeline')">
				<image src="/static/icon1/06.png" mode="aspectFill"></image>
				<text>朋友圈</text>
			</view>
			<view @click="handleOpenPost">二维码分享</view>
		</view>
		
		<!-- 分享海报 -->
		<view class="modal" :class="isShowPost ? 'show' : ''">
			<!-- 海报图 -->
			<canvas canvas-id="invitation-post" :style="{ width: '305px', height: '403px', position: 'fixed', top: '-9999px', left: '35px'}"></canvas>		
			
			<view class="my-post" @longpress="handleSaveAlbum">
				<image class="bg" :src="postUrl" mode="aspectFill" ></image>
			</view>
			
			<image @click="handleClosePost" class="close" src="/static/icon1/07.png"></image>
		</view>
		
	</view>
</template>

<script>
	import { baseURL } from '@/config'
	export default {
		data() {
			return {
				hasFlag: true, // 是否还有更多数据要加载
				imgPath:'',//图片路径
				friendsNum: '',//好友数量
				friendsList: [],//我的好友即下级列表
				isShowPost: false, //是否显示海报
				postUrl: '',//海报URL 
				obj: {},
				requestObj: {
					pageNum: 0,
					pageSize: 10000,
				},
				
			}
		},
		methods: {
			// 保存至相册
			handleSaveAlbum () {
				uni.saveImageToPhotosAlbum({
					filePath: this.postUrl, 
					success: (res) => { 
						uni.showToast({ title: '海报已存至相册' })
						this.isShowPost = false
					}
				})
			},
			
			// 获取我的下级 好友
			async my_sub() {
				if (!this.hasFlag) return // 说明已经没有更多啦
				++this.requestObj.pageNum
				
				let res = await this.$fetch(this.$api.my_sub, this.requestObj, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				console.log(res)
				// 整理数据
				res.rows.forEach(item => {
					item.avatar = item.avatar ? item.avatar : ''
					item.pic = this.imgPath + item.avatar
				})

				// 拼接
				this.friendsList = [...this.friendsList, ...res.rows]
				this.hasFlag = this.friendsList.length < res.total
				
				// 改标题
				this.friendsNum = res.total
				this.changTitle()
			},
			
			//判断有几个好友
			changTitle() {
				if(this.friendsNum ) {
					uni.setNavigationBarTitle({
					    title: '邀请好友（' + this.friendsNum + '）'
					})
				}
			},
			
			// 获取二维码
			async get_user_qrcode () {
				let res = await this.$fetch(this.$api.get_user_qrcode, {} , 'GET')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				this.obj = res.data
				this.$nextTick( ()=> {
					this.createdPost(this.imgPath + res.data.avatar,
					res.data.userName, this.imgPath + res.data.path)
					console.log(11);
				})
				
				
			},
			
			//分享到
			handleShare(scene) {
				console.log(scene, this.postUrl)
				uni.share({
				    provider: "weixin",
				    scene: scene,
				    type: 2,
				    imageUrl: this.postUrl,//网络图片，先上传七牛
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			
			// 创建画布
			createdPost (avatar, userName, qrcode) {
				console.log('创建画布', avatar, userName, qrcode)
				const ctx = uni.createCanvasContext('invitation-post') 
				
				//背景图片
				ctx.drawImage('/static/icon1/08.png', 0, 0, 305, 403)
				
				//用户名
				ctx.setFillStyle('#402110')
				ctx.font="bold 14px PingFangSC-Medium";
				ctx.fillText(userName, 160/2, 40/2+20) 
				const metrics = ctx.measureText(userName)
				
				//说明
				ctx.setFillStyle('rgba(64,33,16,0.50)')
				ctx.font="12px PingFangSC-Regular";
				ctx.fillText('扫码加入“找零工”，开启“滴滴招人”', 163/2, 90/2 + 17) 	
				//二维码
				ctx.drawImage(qrcode, 58/2, 210/2, 496/2, 496/2)
				//提示
				ctx.setFillStyle('#402110')
				ctx.font="14px PingFangSC-Regular";
				ctx.fillText('长按二维码保存至相册', 166/2, 726/2 + 20)
				//任务头像
				ctx.arc(85/2, 85/2, 22.5, 0, 2 * Math.PI)// 画圆
				ctx.clip()
				ctx.drawImage(avatar, 40/2, 40/2, 45, 45) 
				ctx.draw(true, () => {
					// console.log('画画')
					uni.canvasToTempFilePath({
						canvasId: 'invitation-post',
						success: (res) => { 
							uni.hideLoading() 
							this.postUrl = res.tempFilePath
						}
					})
				})
			}, 
		
			//打开海报
			handleOpenPost() {
				this.isShowPost = true
			},
			
			//关闭海报
			handleClosePost () {
				this.isShowPost = false
			}
		},
		onLoad() {
			this.imgPath = uni.getStorageSync('imgPath')
		},
		onShow() {
			this.my_sub ()
			this.get_user_qrcode()
		},
	}
</script>

<style lang="less" scoped>
page {
	background-color: #F2F2F2;
}
.container {
	overflow: hidden;
	& > .fix-title {
		z-index: 1;
		width: 100vw;
		position: fixed;
		
		& > view:first-child {
			background-color: #f2f2f2;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 0;
		}
		& > view:nth-child(2) {
			height: 80rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #F2F2F2;
			text {
				flex: 1;//平均分
				color: #888888;
				text-align: center;
			}
		}
	}
	& > .list {
		margin: 170rpx 0 130rpx;
		& > .single-friend {
			background-color: #FFFFFF;
			display: flex;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 30rpx;
				width: 690rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
			& > view {
				width: 375rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				
				image {
					margin: 0 30rpx 0 60rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #C0C0C0;
				}
				text {
					color: #333540;
				}
				
			}
			& > view:last-child {
				justify-content: center;
				text-align: center;
				color: #222222;
			}
		}
	}
	& > .bottom {
		z-index: 1;
		position: fixed;
		bottom: 0;
		width: 100vw;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		& > view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			& > image {
				width: 42rpx;
				height: 42rpx;
			}
			& > text {
				font-size: 12px;
			}
		}
		& > view:first-child {
			margin-left: 46rpx;
		}
		& > view:nth-child(2) {
			margin: 0 56rpx 0 76rpx;
		}
		& > view:last-child {
			flex: 1;
			height: 100rpx;
			background-color: #FCC928;
			&:active {
				opacity: 0.7;
			}
		}
	}
	
	& > .modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.4);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		
		&.show {
			opacity: 1;
			transition-duration: 0.3s;
			-ms-transform: scale(1);
			transform: scale(1);
			overflow-x: hidden;
			overflow-y: auto;
			pointer-events: auto;
		}
		.my-post {
			// border: 1px solid  #4CD964;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 610rpx;
			height: 806rpx;
				
			.bg {
				width: 610rpx;
				height: 806rpx;
			}
		}
		
		.close {
			position: fixed;
			width: 70rpx;
			height: 70rpx;
			left: 50%;
			margin-left: -35rpx;
			bottom: 90rpx;
		}
	}
}


</style>
